<script setup> 
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import {ref,onMounted} from 'vue'
import {articleGetChannelsService,articleDelChannelsService} from '@/api/article'
import channelComponents from '@/views/article/components/channelComponents.vue'
const channelList = ref([])

//加载动画
const loading = ref(false)

//获取数据
const getChannelList = async()=>{
    //开启加载动画
    loading.value=true
    //发起请求
    const res =  await articleGetChannelsService()
    channelList.value = res.data.data
    //关闭加载动画
    loading.value=false
}

onMounted(()=>{
    getChannelList()
})

//获取操作行
const editChannel =(row)=>{
    dialog.value.open(row)
}
//删除数据
const deleteChannel =async (row)=>{
    await ElMessageBox.confirm('确认删除？','提示：',{
        type:'warning',
        confirmButtonText:'确认',
        cancelButtonText:'取消'
    })
    await articleDelChannelsService(row.id)
    ElMessage.success('删除成功')
    getChannelList()
}

const dialog = ref()

//添加数据
const addchannel = ()=>{
    dialog.value.open({})
}

//成功时刷新页面
const onSuccess = ()=>{
    getChannelList()
}
</script>

<template>
<page-container title="文章分类">
    <template #extra>
        <el-button @click="addchannel">
            添加分类
        </el-button>
    </template>

    <el-table :data="channelList" style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="date" label="序号" type="index" width="100"/>
        <el-table-column prop="cate_name" label="分类名称"/>
        <el-table-column prop="cate_alias" label="分类别名"/>
        <el-table-column fixed="right" label="操作">
            <template #default="{row,$index}">
                <el-button link type="danger" size="small" @click="deleteChannel(row,$index)" :icon="Delete">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="editChannel(row,$index)" :icon="Edit">编辑</el-button>
            </template>
        </el-table-column>

        <!-- 空数据状态 -->
         <template #empty>
            <el-empty description="空空如也呦" />
         </template>
    </el-table>
    <channelComponents ref="dialog" @success="onSuccess"></channelComponents>
</page-container>
</template>

<style scoped>

</style>